<template>
  <div>

    <!--{{listdata}}-->

    <el-form ref="order-form" class="formx" :model="form" label-width="85px" :inline="true" style="width:100%;"
             size="mini" :rules="formRules" :inline-message="false" :show-message="false">
      <el-row :gutter="0">

        <!-- 注：未完成的订单可以使用保存功能 -->
        <asa-button auth="order-submit" :enable="form.status!='2' && isList" @click="saveOrder(1)">
          {{ _label("baocun") }}
        </asa-button>

        <!-- 注：只有在编辑模式下，并且未完成的订单才能使用完成功能 -->
        <asa-button auth="order-submit" @click="finish()" :enable="form.id>0 && form.status!='2'">
          {{ _label("wancheng") }}
        </asa-button>

        <!-- <asa-button auth="order-submit" :type="canSubmitPayment?'primary':'info'" @click="addPayment">{{_label("shengchengfahuodan")}}</asa-button> -->
        <!-- <asa-button auth="order-submit" @click="addPayment" :enable="form.id>0">{{_label("fujian")}}</asa-button>
        <asa-button auth="order-submit" @click="addPayment" :enable="form.id>0">{{_label("feiyong")}}</asa-button> -->

        <!-- 注：选择商品功能必须在未完成状态下才可以 -->
        <asa-button :enable="isEditable" @click="showProduct()">{{ _label("xuanzeshangpin") }}</asa-button>

        <!-- 注：编辑模式才能使用生成品牌订单 -->
        <asa-button auth="order-submit" @click="goToOrderbrand" :enable="form.id>0">
          {{ _label("shengchengpinpaidingdan") }}
        </asa-button>

        <!-- 注：编辑模式才能使用后查 -->
        <asa-button :enable="form.id>0" @click="$refs.houcha.show()">{{ _label("houcha") }}</asa-button>
      </el-row>

      <!-- 订单查询条件 start -->
      <el-row :gutter="0">
        <el-col :span="4" style="width:230px">
          <!-- 订货客户 start -->
          <el-form-item :label="_label('dinghuokehu')" prop="bookingid">
            <simple-select v-model="form.bookingid" source="supplier_2"/>
          </el-form-item>
          <!-- 订货客户 end -->

          <!-- 联系人 start -->
          <el-form-item :label="_label('lianxiren')">
            <simple-select v-model="form.linkmanid" source="supplierlinkman" :parentid="form.bookingid"/>
          </el-form-item>
          <!-- 联系人 end -->

          <!-- 供货商 start -->
          <el-form-item :label="_label('gonghuoshang')">
            <simple-select v-model="form.supplierid" source="supplier_3" :clearable="true"/>
          </el-form-item>
          <!-- 供货商 end -->

          <!-- 发货商 start -->
          <el-form-item :label="_label('fahuoshang')">
            <simple-select v-model="form.finalsupplierid" source="supplier_3" :clearable="true"/>
          </el-form-item>
          <!-- 发货商 end -->
        </el-col>
        <el-col :span="4" style="width:230px">
          <!-- 年代 start -->
          <el-form-item :label="_label('niandai')" prop="ageseason">
            <simple-select v-model="form.ageseason" source="ageseason"/>
          </el-form-item>
          <!-- 年代 end -->

          <!-- 季节 start -->
          <el-form-item :label="_label('jijie')">
            <simple-select v-model="form.seasontype" source="seasontype"/>
          </el-form-item>
          <!-- 季节 end -->

          <!-- 业务类型 start -->
          <el-form-item :label="_label('yewuleixing')" prop="bussinesstype">
            <simple-select v-model="form.bussinesstype" source="bussinesstype"/>
          </el-form-item>
          <!-- 业务类型 end -->

          <!-- 属性 start -->
          <el-form-item :label="_label('shuxing')" prop="property">
            <simple-select v-model="form.property" source="orderproperty"/>
          </el-form-item>
          <!-- 属性 end -->
        </el-col>
        <el-col :span="4" style="width:230px">
          <!-- 金额 start -->
          <el-form-item :label="_label('jine')">
            <el-input v-model="total_price" class="productcurrency" disabled>
              <simple-select source="currency" :clearable="false" v-model="form.currency" slot="prepend" disabled/>
            </el-input>
          </el-form-item>
          <!-- 金额 end -->

          <!-- 折扣率 start -->
          <el-form-item :label="_label('zhekoulv')">
            <sp-float-input v-model="form.discount" @change="onDiscountChange"/>
          </el-form-item>
          <!-- 折扣率 end -->

          <!-- 退税率 start -->
          <el-form-item :label="_label('tuishuilv')">
            <sp-float-input v-model="form.taxrebate"/>
          </el-form-item>
          <!-- 退税率 end -->

          <!-- 备注 start -->
          <el-form-item :label="_label('beizhu')">
            <el-input v-model="form.memo"/>
          </el-form-item>
          <!-- 备注 end -->
        </el-col>
        <el-col :span="4" style="width:230px">
          <!-- 客户订单号 start -->
          <el-form-item :label="_label('kehudingdanhao')">
            <el-input v-model="form.bookingorderno"/>
          </el-form-item>
          <!-- 客户订单号 end -->

          <!-- 公司订单号 start -->
          <el-form-item :label="_label('gongsidingdanhao')">
            <el-input v-model="form.orderno" :placeholder="_label('zidonghuoqu')" disabled/>
          </el-form-item>
          <!-- 公司订单号 end -->

          <!-- 制单人 start -->
          <el-form-item :label="_label('zhidanren')">
            <sp-display-input :value="form.makestaff" source="currentUsers" :placeholder="_label('zidonghuoqu')"/>
          </el-form-item>
          <!-- 制单人 end -->

          <!-- 订货日期 start -->
          <el-form-item :label="_label('dinghuoriqi')">
            <el-date-picker v-model="form.orderdate" type="date" value-format="yyyy-MM-dd"/>
          </el-form-item>
          <!-- 订货日期 end -->
        </el-col>
        <el-col :span="4" style="width:230px">
          <!-- 性别 start -->
          <el-form-item :label="_label('xingbie')">
            <simple-select source="gender" :multiple="true" v-model="form.genders"/>
          </el-form-item>
          <!-- 性别 end -->

          <!-- 品牌 start -->
          <el-form-item :label="_label('pinpai')">
            <simple-select source="brand" :multiple="true" v-model="form.brandids"/>
          </el-form-item>
          <!-- 品牌 end -->

          <!-- 制单日期 start -->
          <el-form-item :label="_label('zhidanriqi')">
            <el-input :value="form.maketime" :placeholder="_label('zidonghuoqu')" disabled></el-input>
          </el-form-item>
          <!-- 制单日期 end -->

          <!-- 批次号 start -->
          <el-form-item :label="_label('batch-number')">
            <el-input :value="form.maketime" :placeholder="_label('zidonghuoqu')" disabled></el-input>
          </el-form-item>
          <!-- 批次号 end -->
        </el-col>
      </el-row>
      <!-- 订单查询条件 end -->

    </el-form>

    <!-- 每个sku和对应的spu的订货量 start，如果数据量比较大，那么 orderdetails 的值会传输的比较慢，这个可能需要做额外的优化 -->
    <el-row>
      <el-col :span="24" class="product">
        <el-table :data="orderdetails"
                  stripe
                  border
                  style="width:100%;"
                  :show-summary="true"
                  :summary-method="getSummary">
          <el-table-column align="center" width="60">
            <!-- 主图 start -->
            <template v-slot="scope">
              <img :src="_fileLink(scope.row.product.picture)" style="width:50px;height:50px;"/>
            </template>
            <!-- 主图 end -->
          </el-table-column>

          <!-- 国际码 start -->
          <el-table-column :label="_label('guojima')" align="center" width="200">
            <el-table-column :label="_label('guojima')" align="center" width="200">
              <template v-slot="scope">

                <!-- 此标签替换掉，否则会调用多次，严重影响性能 -->
                <!--                <sp-product-tip :product="scope.row.product"/>-->

                <el-link type="primary" @click="onClick(scope.row.product)" size="mini">
                  {{ scope.row.product.getGoodsCode() }}
                </el-link>

              </template>
              <template v-slot:header="{row}">
                <el-input v-model="form2.keyword" size="mini"/>
              </template>
            </el-table-column>
          </el-table-column>
          <!-- 国际码 end -->

          <!-- 订货数量 start -->
          <el-table-column prop="packing_name" :label="_label('base-packing')" align="center" width="100px">
            <template v-slot="{row}">
              <p><strong>{{ row.product.packing_name }}</strong></p>
              <p v-html="row.product.packing_conversion"></p>
            </template>
          </el-table-column>
          <!-- 订货数量 end -->

          <!-- 订货数量 start -->
          <el-table-column prop="number" :label="_label('dinggoushuliang')" align="center" :width="width">
            <template v-slot="{row, $index}">
              <sp-product-input :ref="$index" :columns="row.product.packings" :uniq="row.product.id"
                                :disabled="!isEditable" @change="onChange" :init="getInit(row.product.id)"
                                :key="row.product.id" @up="focus($event, $index-1)"
                                @down="focus($event, $index+1)"/>
            </template>
          </el-table-column>
          <!-- 订货数量 end -->

          <!-- 总数 start -->
          <el-table-column prop="total" :label="_label('sum-base-packing')" width="130" align="center">
            <template v-slot="{row}">
              {{ stat[row.product.id].total.toFixed(2) }}
            </template>
          </el-table-column>
          <!-- 总数 end -->

          <!-- 币种 start -->
          <el-table-column prop="label" :label="_label('bizhong')" width="80" align="center">
            <template v-slot="{row}">
              {{ row.product.factorypricecurrency_label }}
            </template>
          </el-table-column>
          <!-- 币种 end -->

          <!-- 出厂价 start -->
          <el-table-column prop="label" :label="_label('chuchangjia')" width="100" align="center">
            <template v-slot="{row}">
              <asa-order-input v-model="row.factoryprice" size="mini"/>
            </template>
          </el-table-column>
          <!-- 出厂价 end -->

          <!-- 出厂价合计 start -->
          <el-table-column prop="label" :label="_label('chuchangjiaheji')" width="100" align="center">
            <template v-slot="{row}">
              {{ f(row.factoryprice * stat[row.product.id].total) }}
            </template>
          </el-table-column>
          <!-- 出厂价合计 end -->

          <!-- 折扣率 start -->
          <el-table-column prop="label" :label="_label('zhekoulv')" width="100" align="center">
            <template v-slot="{row}">
              <asa-order-input v-model="row.discount" size="mini"/>
            </template>
          </el-table-column>
          <!-- 折扣率 end -->

          <!-- 成交价 start -->
          <el-table-column prop="label" :label="_label('chengjiaojia')" width="130" align="center">
            <template v-slot="{row}">
              {{ f(stat[row.product.id].dealPrice) }}
            </template>
          </el-table-column>
          <!-- 成交价 end -->

          <!-- 成交总价 start -->
          <el-table-column prop="label" :label="_label('chengjiaozongjia')" width="100" align="center">
            <template v-slot="{row}">
              {{ f(stat[row.product.id].dealPrice * stat[row.product.id].total) }}
            </template>
          </el-table-column>
          <!-- 成交总价 end -->

          <!-- 产品名称 start -->
          <el-table-column :label="_label('chanpinmingcheng')" align="left" width="300">
            <template v-slot="scope">
              {{ scope.row.product.getName() }}
            </template>
          </el-table-column>
          <!-- 产品名称 end -->

          <!-- 操作按钮 start -->
          <el-table-column :label="_label('caozuo')" width="100" align="center" v-if="isEditable">
            <template v-slot="{row}">
              <as-button size="mini" type="danger" @click="deleteRow(row)">{{ _label('shanchu') }}</as-button>
            </template>
          </el-table-column>
          <!-- 操作按钮 end -->
        </el-table>
      </el-col>
    </el-row>
    <!-- 每个sku和对应的spu的订货量 end -->

    <!-- 选择商品对话框 start -->
    <asa-select-product-dialog :visible.sync="pro" :brandids="form.brandids" :genders="form.genders"
                               @select="onSelect"/>
    <!-- 选择商品对话框 end -->

    <!-- 后查 - 品牌订单 start -->
    <sp-orderbrand-list ref="houcha" :orderid="form.id"/>
    <!-- 后查 - 品牌订单 end -->

    <!-- 编辑商品对话框 start -->
    <asa-product ref="product"></asa-product>
    <!-- 编辑商品对话框 end -->
  </div>
</template>

<script>
import API from '../api.js';
import {_label} from "../globals.js";
import {copyTo, extend} from "../object.js";
import detailConvert from "../asa/order-detail.js";
import orderMixin from "../mixins/order.js";
import {statHelper} from "../helper.js";
import Asa_Orderbrand_List from '../asa/Asa_Orderbrand_List.vue';
import Asa_Select_Product_Dialog from '../asa/Asa_Select_Product_Dialog.vue'
import AsaProduct from "@/component/asa/Asa_Product"
import Asa_Product_Input from "@/component/asa/Asa_Product_Input";

const props = {
  columns: [
    {name: "payment_type", label: _label("fukuanleixing"), type: 'select', source: "paymenttype"},
    {name: "currency", label: _label("bizhong"), type: 'select', source: "currency"},
    {name: "amount", label: _label("jine")},
    {name: "paymentdate", label: _label("fukuanriqi"), type: "date"},
    {name: "memo", label: _label("beizhu")},
    {name: "makestaff", label: _label("tijiaoren"), type: 'select', source: "user", is_edit_hide: true},
    {name: "status", label: _label("yiruzhang"), type: "switch", is_edit_hide: true},
  ],
  controller: "orderpayment",
  auth: "order-submit",
  base: {
    orderid: '',
  },
  options: {
    isedit: (item) => item.status == 0,
    isdelete: (item) => item.status == 0,
    autoreload: true,
  },
};

export default {
  name: 'sp-orderform',
  components: {
    AsaProduct,
    [Asa_Orderbrand_List.name]: Asa_Orderbrand_List,
    [Asa_Product_Input.name]: Asa_Product_Input,
    [Asa_Select_Product_Dialog.name]: Asa_Select_Product_Dialog,
  },
  mixins: [orderMixin],
  data() {
    let self = this;

    return {
      form: {
        bookingid: "",
        orderdate: "",
        linkmanid: "",
        bussinesstype: "",
        supplierid: "",
        finalsupplierid: "",
        ageseason: "",
        seasontype: "",
        bookingorderno: "",
        currency: "",
        discount: "1",
        taxrebate: "1",
        property: "1",
        makestaff: "",
        maketime: "",
        memo: "",
        orderno: "",
        status: "", //状态，1=保存；2=送审；3=审核完成
        id: "",
        brandids: '',
        genders: '',
        // 批次
        batch: ''
      },
      form2: {
        keyword: '',
      },
      tabledata: [],
      listdata: [],
      details: [],
      pro: false,
      props,
    };
  },
  // 方法列表
  methods: {
    // 编辑当前商品
    onClick(row) {
      let self = this;
      self.$refs.product.edit(true).setInfo(row).then(product => product.show(false));
    },
    // 生成品牌订单
    async goToOrderbrand() {
      const self = this;
      self._log('goToOrderbrand');

      const {details} = await API.getOrderListToImport({orderid: self.form.id});

      if (details && details.length > 0) {
        await self.$router.push('/orderbrand/0?id=' + self.form.id);
      } else {
        // 所有商品已经加入品牌订单了。
        this.$message({
          message: self._label('tip-001'),
          type: 'success'
        });
      }
    },
    // 调用部分注释掉了
    addPayment() {
      let self = this;
      if (self.canSubmitPayment) {
        props.base.orderid = self.form.id;
        self.$refs.payment.showFormToCreate();
      }
    },
    focus(colIndex, index) {
      let target = this.$refs[index];
      if (target) {
        target.startFocus(colIndex);
      }
    },
    // 显示选择商品对话框
    showProduct() {
      this.pro = true;
    },
    onSelect(productDetail) {
      let self = this;
      self.appendRow({
        id: "",
        product: productDetail,
        discount: self.form.discount,
        factoryprice: self.f(productDetail.factoryprice),
        total: 0,
      });
    },
    finish() {
      const self = this;

      self._submit("/order/finish", {id: self.form.id}).then(function (res) {
        self._redirect("/order/" + res.data.form.id);
      });
    },
    // 保存订单
    saveOrder(status) {
      let self = this;

      let params = {
        form: extend({}, self.form, {status}),
      };
      params.form.total = self.total_price;

      let list = [];
      console.log(self.tabledata)
      console.log(self.listdata)
      for (let item of self.tabledata) {
        for (let row of self.listdata) {
          if (row.productid == item.product.id && row.number > 0) {
            list.push({
              productid: Number(item.product.id),
              discount: Number(item.discount),
              packing_id: row.packing_id,
              number: row.number,
              factoryprice: Number(item.factoryprice),
              id: self.getDetailId(item.product.id, row.packing_id),
              sizecontentid:item.product.sizecontentids,
            });
          }
        }
      }

      params.list = list;
        console.log(params)

        // 开始提交
      self.validate().then(() => {
        self._submit("/order/saveorder", {params: JSON.stringify(params)}).then(function (res) {
          let data = res.data;
          self._redirect("/order/" + res.data.form.id);
        });
      });
    },
    getDetailId(productid, packing_id) {
      let row = this.details.find(item => item.productid == productid && item.packing_id == packing_id);
      return row ? row.id : 0;
    },
    deleteRow(row) {
      const self = this;
      let index = self.tabledata.findIndex(item => item == row);
      self.$delete(self.tabledata, index);
    },
    appendRow(row) {
      const self = this;

      let is_exist = self.tabledata.some(rowData => {
        return rowData.product.id == row.product.id;
      });

      if (!is_exist) {
        self.tabledata.unshift(row);
        self.form.currency = self.currencyid;
      }
    },
    getInit(productid) {
      let self = this;
      let output = {};

      for (let item of self.listdata) {
        if (item.productid === productid) {
          output[item.packing_id] = item.number;
        }
      }

      return output;
    },

    // 选择的订货商品明细
    onChange(list) {
      let self = this;

      for (let item of list) {
        let row = self.listdata.find(({packing_id, productid}) => packing_id == item.packing_id && productid == item.uniq);
        if (row) {
          row.number = item.number;
        } else {
          self.listdata.push({
            packing_id: item.packing_id,
            // 添加 rate
            rate: item.rate,
            number: item.number,
            productid: item.uniq,
          });
        }
      }
    },
    // 折扣变更
    onDiscountChange(newValue, oldValue) {
      let self = this;
      for (let item of self.tabledata) {
        if (item.discount == oldValue || item.discount * 1 <= 0) {
          item.discount = newValue;
        }
      }
    },
    // 统计
    getSummary({columns, data}) {
      const self = this;
      const sums = [];
      columns.forEach((column, index) => {
        //self._log(column, index)
        if (index == 0) {
          sums[index] = self._label("heji");
          return;
        } else if (index == 7) {
          sums[index] = self.f(data.reduce((total, row) => total + row.factoryprice * self.stat[row.product.id].total, 0));
        } else if (index == 4) {
          // 总数基本单位
          sums[index] = self.f(data.reduce((total, row) => total + self.stat[row.product.id].total, 0));
        } else if (index == 3) {
          sums[index] = self.listdata.reduce((total, row) => total + Number(row.number), 0);
        }
      })

      sums[1] = data.length;
      sums[10] = self.total_price;

      return sums;
    },
    isMatch(keyword, search) {
      return keyword.length > 0 ? search.toUpperCase().indexOf(keyword) >= 0 : true
    },
  },
  computed: {
    isList() {
      for (let item of this.listdata) {
        if (item.number > 0) {
          return true;
        }
      }
      return false;
    },
    // 是否可以编辑，要求状态的值为空，或者为1（未完成），如果为2，说明已完成，那么就不再允许编辑了
    isEditable() {
      var status = this.form.status;
      return status == '1' || status == '' || !status
    },
    // 单元格动态宽度
    width() {
      return this.tabledata.reduce((max, {product}) => Math.max(max, product.packings.length), 1) * 50 + 21;
    },
    canSubmitPayment() {
      return this.form.id > 0;
    },
    total_price() {
      let self = this;
      let total = self.tabledata.reduce(function (total, row) {
        return total + self.stat[row.product.id].total * self.stat[row.product.id].dealPrice;
      }, 0);
      return this.f(total);
    },
    genderlabels() {
      let obj = {};
      this.tabledata.forEach(item => {
        if (item.product.gender_label.length > 0) {
          obj[item.product.gender_label] = 1
        }
      });
      return Object.keys(obj).join(",");
    },

    // 统计总数
    stat() {
      let self = this;

      let helper = statHelper({
        dealPrice: 0,
        total: 0,
      });

      for (let item of self.tabledata) {
        let row = helper.get(item.product.id);
        // 成交价
        // 计算方式为：国际出厂价 * 折扣率 / 退税率
        row.dealPrice = self.form.taxrebate > 0 ? self.f(item.factoryprice * item.discount / self.form.taxrebate) : 0;
      }

      // 统计，需要对最终结果进行转换，所以需要把 index 取出来，array 必须要先转成 map
      for (let [i, item] of new Map( self.listdata.map( ( item, i ) => [ i, item ] ) )) {
        let row = helper.get(item.productid)
        // 因为价格是以基本包装单位为依据的，所以其他单位都需要换算成基本单位来进行比较，这里的公式是：数量/比率
          //-----------------------------暂缺少解决办法-----------------------------
        // row.total += item.number / item.rate;
        row.total += item.number;
        // 判断是否循环结束
        if (i === self.listdata.length - 1) {
          row.total = Math.round(row.total * 100) / 100;
        }
      }
      // 返回
      return helper.result()
    },
    currencyid() {
      let self = this;
      if (self.form.currency > 0) {
        return self.form.currency;
      }

      for (let i = 0; i < self.details.length; i++) {
        return self.details[i].currencyid;
      }

      for (let i = 0; i < self.tabledata.length; i++) {
        return self.tabledata[i].product.factorypricecurrency;
      }
    },
    // 订单详情
    orderdetails() {
      let self = this;

      let keyword = self.form2.keyword.toUpperCase();
      return self.tabledata.filter(item => {
        return self.isMatch(keyword, item.product.getGoodsCode(''));
      })
    },
  },

  // 渲染前调用
  mounted() {
    const self = this;
    let route = self.$route;
    let label;
    if (route.params.id == 0) {
      label = self._label("xinjiandingdan");
    } else {
      //加载数据
      self._fetch("/order/loadorder", {id: route.params.id}).then(async function (res) {
        // self._log("加载订单信息", res)

        // 这个是属性赋值，把前面的值复制到后面的变量中(排除 undefined)，这样 form 就有值了
        copyTo(res.data.form, self.form);

        self.tabledata = [];
        if (res.data.list) {
          // 如果是编辑，details 就有值了，新增则没有值
          self.details = res.data.list;

          for (let item of res.data.list) {
            // listdata 就有值了
            self.listdata.push({
              productid: item.productid,
              packing_id: item.packing_id,
              number: item.number,
            });
          }
          let results = await detailConvert(res.data.list);
          results.forEach(item => self.appendRow(item));

          self.form.currency = self.currencyid;
        }
        self._setTitle(self._label("dingdan") + ":" + self.form.orderno);
      })
      label = "loading...";
    }
    self._setTitle(label);


    self.initRules(Rules => {
      let _label = self._label;
      return {
        bussinesstype: Rules.id({required: true, message: _label("8000"), label: _label("yewuleixing")}),
        // ageseason: Rules.id({required: true, message: _label("8000"), label: _label("niandai")}),
        property: Rules.id({required: true, message: _label("8000"), label: _label("shuxing")}),
        bookingid: Rules.id({required: true, message: _label("8000"), label: _label("dinghuokehu")}),
      };
    });
  },
};
</script>

<style scoped></style>
